'use strict';
import React, {Component} from 'react';

import {
    View,
    Image,
    ImageBackground,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    TextInput,
    ScrollView,
    TouchableHighlight,
    TouchableNativeFeedback,
    Switch,
    StatusBar,
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import ToastUtil from '../../../../core/utils/toast-util.js';
import {Loading, EasyLoading} from 'react-native-easy-loading';
import DatePicker from 'react-native-datepicker'
import CameraButton from '../../../../core/component/comp.button-camera';
import Color from '../../../../core/constant/color';
import Http from '../../../../core/utils/http';

import Util from '../../../../core/utils/util';
import UserInfoBar from '../../../../core/component-biz/comp.user-info-bar';
import IconButton from '../../../../core/component/comp.icon-button';
import GridView from '../../../../core/component/comp.grid-view';
import ImageButton from "../../../../core/component/comp.image-button";
import PhotoInfoItem from "../../../../core/component-biz/comp.photo-info-panel";
import WinPanel from "../../../../core/component/comp.win-panel";
import WinPanelRow from "../../../../core/component/comp.win-panel-row";

class YuanwangMainScene extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        title: navigation.state.params.title,
        headerTintColor: "white",
        headerStyle: {
            backgroundColor: Color.PRIMARY_COLOR,
            elevation: null
        },
    });

    constructor(props) {
        super(props);
        this.state = {
            isShowWishMode: true,
        }
    }

    onSelectedModeChanged(selectedIndex) {
        this.setState({
            isShowWishMode: selectedIndex == 0,
        });
    }

    componentDidMount() {

    }

    genButtonGroupUI() {
        return (
            <View style={styles.bottomButtonGroup}>
                <IconButton style={styles.btnItem} iconSource={require('../../../../img/icon_small_help.png')}
                            title="去帮忙"/>
                <IconButton style={styles.btnItem} iconSource={require('../../../../img/icon_small_love.png')}
                            title="27"/>
                <IconButton style={styles.btnItem} title="私聊"/>
            </View>
        );
    }

    genBigUserInfoPanelUI(userInfo, index) {
        return (
            <View key={`big-user-info-panel-${index}`} style={styles.bigUserInfoPanel}>
                <View style={styles.topUserInfoBar}>
                    <UserInfoBar headUrl={userInfo.headUrl} title={userInfo.nickName} subTitle={userInfo.city}
                                 rightTitle={userInfo.time}/>
                </View>
                <View style={styles.midUserImagePanel}>
                    {userInfo.hasOwnProperty('imageUrlList') && <Image style={styles.midUserImage} source={userInfo.imageUrlList[0]}/>}
                </View>
                <View style={styles.midUserDescriptionPanel}>
                    <Text style={styles.midUserDescription}>{userInfo.desc}</Text>
                </View>
                <View style={styles.bottomUserInfoPanel}>
                    <Text style={styles.userInfoText}>{userInfo.age}岁 | {userInfo.height}cm | {userInfo.weight}kg</Text>
                </View>
                {this.genButtonGroupUI()}
            </View>
        );
    }

    genUserInfoListUI() {
        const userList = [
            {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_02.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_03.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_04.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },
        ];
        const userListUI = userList.map((userInfo, index) => {
            return this.genBigUserInfoPanelUI(userInfo, index)
        })
        return userListUI
    }

    genPeopleInfoListUI() {
        const items = [
            {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_01.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_01.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '刚刚',
            }, {
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_02.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_02.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_03.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_04.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_05.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_03.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },{
                nickName: '小尾巴',
                headUrl: require('../../../../img/icon_head_06.jpg'),
                city: '南京市',
                gender: 'female',
                imageUrlList: [require('../../../../img/icon_head_04.jpg')],
                desc: '来到我的碗里~',
                age: 24,
                height: 160,
                weight: 47,
                time: '1小时前',
            },
        ];
        return (
            <GridView removeClippedSubviews={false} pageSize={5} initialListSize={5} groupStyle={styles.gridViewGrop} items={items} itemsPerRow={2} renderItem={this.genPeopleInfoItemUI}/>
        )
    }

    onPressPeopleInfoDetail(info){
        const { navigate } = this.props.navigation;
        navigate('YuanwangDetail',{title:info.nickName,userInfo:info});
    }

    genPeopleInfoItemUI = (item, index) => {
        return (<PhotoInfoItem key={`people-info-item-${index}`} item={item} onPress={this.onPressPeopleInfoDetail.bind(this,item)}/>)
    }


    genPhotoPanelUI(){
        return (
            <WinPanel title='相册' iconSource={require('../../../../img/icon_small_photo.png')}>
                {this.genPeopleInfoListUI()}
            </WinPanel>
        );
    }

    onPressJumpToAllWish=()=>{
        Util.showToast("跳转到全部愿望")
    }

    genAllWishUI(){
        return (
            <WinPanel title='全部愿望' iconSource={require('../../../../img/icon_small_wish.png')} onPressTitleBar={this.onPressJumpToAllWish}/>
        );
    }


    genUserDetailInfoPanelUI(){
        const { userInfo } = this.props.navigation.state.params;

        return (
            <WinPanel title='详细信息' iconSource={require('../../../../img/icon_small_info.png')}>
                <WinPanelRow title='爱心号' subTitle="1111100001" showSplit={true}/>
                <WinPanelRow title='情感状态' subTitle="单身" showSplit={true}/>
                <WinPanelRow title='常住地' subTitle="上海市" showSplit={true}/>
                <WinPanelRow title='生日' subTitle="1992-8-16" showSplit={true}/>
                <WinPanelRow title='职业' subTitle="销售" showSplit={true}/>
                <WinPanelRow title='收入' subTitle="10万以上/年" showSplit={true}/>
                <WinPanelRow title='身高' subTitle="170cm" showSplit={true}/>
                <WinPanelRow title='体重' subTitle="50kg" showSplit={true}/>
                <WinPanelRow title='学历' subTitle="高中" showSplit={true}/>
                <WinPanelRow title='资产' subTitle="三无人员" showSplit={true}/>
            </WinPanel>
        );
    }

    genUserLoveInfoPanelUI(){
        const { userInfo } = this.props.navigation.state.params;
        return (
            <WinPanel title='详细信息' iconSource={require('../../../../img/icon_small_info.png')}>
                <WinPanelRow title='运动' subTitle="瑜伽" showSplit={true}/>
                <WinPanelRow title='书籍' subTitle="宫心计" showSplit={true}/>
                <WinPanelRow title='电影' subTitle="动漫片" showSplit={true}/>
                <WinPanelRow title='音乐' subTitle="古典音乐" showSplit={false}/>
            </WinPanel>
        );
    }



    genCheckPassVideoUI(){
        const { userInfo } = this.props.navigation.state.params;
        if(userInfo.hasOwnProperty('passVideo') && userInfo.passVideo){
            return (
                <IconButton style={styles.btnPassVideo} textStyle={styles.btnPassVideoText} iconSource={require('../../../../img/icon_pass_video.png')} title="视频认证已通过"/>
            )
        }
    }

    genGenderUI() {
        const { userInfo } = this.props.navigation.state.params;
        const {gender} = userInfo
        if (gender) {
            const genderUrl = gender == "male" ? require('../../../../img/gender_boy.png') : require('../../../../img/gender_girl.png');
            return (<Image style={styles.genderIcon} source={genderUrl}/>);
        }
    }

    genUserDetailPanelUI(){
        const { userInfo } = this.props.navigation.state.params;
        let shortDesc = "我还没有想好要写啥";
        if(userInfo.hasOwnProperty(shortDesc)){
            shortDesc = userInfo.shortDesc
        }
        return (
            <View style={styles.userDetailPanel}>
                <View style={styles.userDetailTop}>
                    <Text style={styles.userNickName}>{userInfo.nickName}</Text>
                    <View style={styles.userGenderGroup}>
                        {this.genGenderUI()}
                        <Text style={styles.age}>{userInfo.age}</Text>
                    </View>

                    <View style={styles.rightActivePanel}>
                        <IconButton style={styles.btnActiveTime} textStyle={styles.btnActiveTimeText} title="活跃时间"/>
                    </View>
                </View>
                <View style={styles.splitLine}/>
                <View style={styles.userDetailBottom}>
                    <Text style={styles.userDetailShortDesc}>{shortDesc}</Text>
                </View>
            </View>
        );
    }

    genBigHeaderPanelUI(){
        const { userInfo } = this.props.navigation.state.params;
        if(userInfo){
            return (
                <View style={styles.bigHeaderPanel}>
                    {userInfo.hasOwnProperty('imageUrlList') && <Image style={styles.bigHeaderImage} source={userInfo.imageUrlList[0]}>
                        <ImageButton style={styles.playBtn} imageStyle={styles.playBtnImage} source={require('../../../../img/btn_small_play.png')}/>
                    </Image>}
                    {this.genCheckPassVideoUI()}
                    {this.genUserDetailPanelUI()}
                </View>
            );
        }

    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={styles.scrollView}>
                    {this.genBigHeaderPanelUI()}
                    {this.genPhotoPanelUI()}
                    {this.genAllWishUI()}
                    {this.genUserDetailInfoPanelUI()}
                    {this.genUserLoveInfoPanelUI()}
                </ScrollView>
            </View>
        )
    }

}


const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor: '#EBEBEB',
    },
    scrollView: {

    },

    bigHeaderPanel:{

    },
    bigHeaderImage:{
        height:255,
        resizeMode:'cover',
        width:'100%',
        alignItems:'center',
        justifyContent:'center',
    },
    btnPassVideo:{
        backgroundColor:'rgba(0,0,0,0.7)',
        width:140,
        position:'absolute',
        left:8,
        top:8,
        paddingLeft:8,
        paddingRight:8,
    },
    btnPassVideoIcon:{
        width:22,
        height:22,
    },
    btnPassVideoText:{
        color:'#0ABB07',
    },
    playBtn:{
        width:65,
        height:65,
    },
    playBtnImage:{
        width:65,
        height:65,
    },
    userDetailPanel:{
        backgroundColor:'white',
    },
    userDetailTop:{
        padding:8,
        flexDirection:'row',
        alignItems:'center',
        // borderWidth:1,
    },
    userNickName:{
        fontSize:14,
    },
    userGenderGroup:{
        borderWidth:1,
        borderColor:'#FF0055',
        height:18,
        borderRadius:4,
        flexDirection:'row',
        alignItems:'center',
        paddingLeft:4,
        paddingRight:4,
        marginLeft:8,

    },
    age:{
        color:'#FF0055',
        fontSize:12,
    },
    genderIcon: {
        width: 12,
        height: 12,
    },
    rightActivePanel:{
        flex:1,
        alignItems:'flex-end',

    },
    btnActiveTime:{
        width:78,
        height:30,
        backgroundColor:'#FF0055',
    },
    btnActiveTimeText:{
        color:'white',
    },
    splitLine:{
        height:Util.getRealPixel(1),
        backgroundColor:'#EDEDEF',
        marginLeft:8,
    },
    userDetailBottom:{
        padding:8,
    },
    userDetailShortDesc:{
        color:'#707070',
        fontSize:14,
    },



    gridViewGrop:{
        justifyContent:'space-between',
        padding:4,
    },
    bigUserInfoPanel: {
        backgroundColor: 'white',
        marginBottom: 4,
    },


});

export default YuanwangMainScene;